{% extends "base.html" %}

{% block title %}教练列表 - 乒乓球培训管理系统{% endblock %}

{% block extra_css %}
<style>
    .coach-row {
        background: white;
        border: 1px solid #e5e5e5;
        border-radius: 8px;
        margin-bottom: 10px;
        padding: 15px;
        transition: all 0.3s ease;
    }

    .coach-row:hover {
        box-shadow: 0 2px 10px rgba(0,0,0,0.1);
        border-color: #007bff;
    }

    .coach-avatar-sm {
        width: 50px;
        height: 50px;
        border-radius: 50%;
        object-fit: cover;
        border: 2px solid #fff;
        box-shadow: 0 1px 4px rgba(0,0,0,0.1);
    }

    .coach-level-badge {
        font-size: 0.7rem;
        padding: 2px 6px;
        border-radius: 10px;
    }

    .level-senior { background: linear-gradient(45deg, #ffd700, #ff8c00); color: white; }
    .level-middle { background: linear-gradient(45deg, #c0c0c0, #808080); color: white; }
    .level-junior { background: linear-gradient(45deg, #cd7f32, #8b4513); color: white; }

    .coach-name {
        font-size: 1.1rem;
        font-weight: 600;
        color: #333;
        margin-bottom: 5px;
    }

    .coach-meta {
        color: #666;
        font-size: 0.85rem;
    }

    .hourly-rate {
        color: #28a745;
        font-weight: bold;
        font-size: 1rem;
    }

    .btn-sm-round {
        border-radius: 15px;
        padding: 5px 15px;
        font-size: 0.8rem;
    }

    .rating-stars {
        color: #ffd700;
        font-size: 0.9rem;
    }

    .coach-bio {
        color: #666;
        font-size: 0.9rem;
        margin: 8px 0;
    }

    .quick-filters {
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        border-radius: 8px;
        padding: 15px;
        margin-bottom: 20px;
        color: white;
    }

    .quick-filters .btn {
        margin: 2px;
        border-radius: 20px;
    }

    .empty-state {
        text-align: center;
        padding: 60px 20px;
        color: #666;
    }

    .empty-state i {
        font-size: 4rem;
        color: #ddd;
        margin-bottom: 20px;
    }
</style>
{% endblock %}

{% block content %}
<div class="container-fluid">
    <div class="row">
        <div class="col-12">
            <div class="d-flex justify-content-between align-items-center mb-4">
                <h2>
                    <i class="fas fa-list me-2"></i>教练列表
                </h2>
                <nav aria-label="breadcrumb">
                    <ol class="breadcrumb">
                        <li class="breadcrumb-item"><a href="{{ url_for('dashboard.index') }}">首页</a></li>
                        <li class="breadcrumb-item active">教练列表</li>
                    </ol>
                </nav>
            </div>
        </div>
    </div>

    <!-- 快速筛选 -->
    <div class="row">
        <div class="col-12">
            <div class="quick-filters">
                <div class="d-flex justify-content-between align-items-center">
                    <div>
                        <h6 class="mb-2">快速筛选</h6>
                        <div>
                            <a href="{{ url_for('student_coach.list') }}" class="btn btn-light btn-sm">全部</a>
                            <a href="{{ url_for('student_coach.list', gender='male') }}" class="btn btn-outline-light btn-sm">男教练</a>
                            <a href="{{ url_for('student_coach.list', gender='female') }}" class="btn btn-outline-light btn-sm">女教练</a>
                            <a href="{{ url_for('student_coach.list', coach_level='senior') }}" class="btn btn-outline-light btn-sm">高级教练</a>
                            <a href="{{ url_for('student_coach.list', coach_level='middle') }}" class="btn btn-outline-light btn-sm">中级教练</a>
                        </div>
                    </div>
                    <div class="text-end">
                        <p class="mb-1"><strong>共找到 {{ total }} 位教练</strong></p>
                        <div class="btn-group btn-group-sm" role="group">
                            <a href="{{ url_for('student_coach.search') }}" class="btn btn-outline-light">
                                <i class="fas fa-th me-1"></i>卡片视图
                            </a>
                            <a href="{{ url_for('student_coach.list') }}" class="btn btn-light">
                                <i class="fas fa-list me-1"></i>列表视图
                            </a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- 教练列表 -->
    {% if coaches %}
    <div class="row">
        <div class="col-12">
            {% for coach in coaches %}
            <div class="coach-row">
                <div class="row align-items-center">
                    <div class="col-md-1">
                        <img src="{{ coach.photo_url or url_for('static', filename='images/default-avatar.svg') }}"
                             alt="{{ coach.real_name }}" class="coach-avatar-sm">
                    </div>
                    <div class="col-md-3">
                        <div class="coach-name">
                            {{ coach.real_name }}
                            <span class="coach-level-badge level-{{ coach.coach_level }}">
                                {% if coach.coach_level == 'senior' %}高级{% elif coach.coach_level == 'middle' %}中级{% else %}初级{% endif %}
                            </span>
                        </div>
                        <div class="coach-meta">
                            <i class="fas fa-venus-mars me-1"></i>{{ '男' if coach.gender == 'male' else '女' }}
                            {% if coach.age %}・{{ coach.age }}岁{% endif %}
                        </div>
                    </div>
                    <div class="col-md-4">
                        {% if coach.bio %}
                        <div class="coach-bio">
                            {{ coach.bio[:80] }}{% if coach.bio|length > 80 %}...{% endif %}
                        </div>
                        {% else %}
                        <div class="coach-bio text-muted">暂无简介</div>
                        {% endif %}
                    </div>
                    <div class="col-md-2 text-center">
                        <div class="rating-stars mb-1">
                            <i class="fas fa-star"></i>
                            <i class="fas fa-star"></i>
                            <i class="fas fa-star"></i>
                            <i class="fas fa-star"></i>
                            <i class="far fa-star"></i>
                            <span class="ms-1 text-muted">(4.0)</span>
                        </div>
                        <div class="coach-meta">
                            <i class="fas fa-users me-1"></i>{{ coach.student_relations.filter_by(status='approved').count() }}名学员
                        </div>
                    </div>
                    <div class="col-md-2 text-end">
                        <div class="hourly-rate mb-2">
                            ￥{{ coach.hourly_rate or 0 }}/课时
                        </div>
                        <div class="btn-group btn-group-sm" role="group">
                            <a href="{{ url_for('student_coach.detail', coach_id=coach.id) }}"
                               class="btn btn-outline-primary btn-sm-round">
                                详情
                            </a>
                            <a href="{{ url_for('student_coach.apply', coach_id=coach.id) }}"
                               class="btn btn-success btn-sm-round">
                                申请
                            </a>
                        </div>
                    </div>
                </div>
            </div>
            {% endfor %}
        </div>
    </div>

    <!-- 分页 -->
    {% if pagination and pagination.pages > 1 %}
    <div class="row mt-4">
        <div class="col-12">
            <nav aria-label="教练列表分页">
                <ul class="pagination justify-content-center">
                    {% if pagination.has_prev %}
                    <li class="page-item">
                        <a class="page-link" href="{{ url_for('student_coach.list', page=pagination.prev_num) }}">
                            <i class="fas fa-chevron-left"></i>
                        </a>
                    </li>
                    {% endif %}

                    {% for page_num in pagination.iter_pages() %}
                        {% if page_num %}
                            {% if page_num != pagination.page %}
                            <li class="page-item">
                                <a class="page-link" href="{{ url_for('student_coach.list', page=page_num) }}">
                                    {{ page_num }}
                                </a>
                            </li>
                            {% else %}
                            <li class="page-item active">
                                <span class="page-link">{{ page_num }}</span>
                            </li>
                            {% endif %}
                        {% else %}
                        <li class="page-item disabled">
                            <span class="page-link">…</span>
                        </li>
                        {% endif %}
                    {% endfor %}

                    {% if pagination.has_next %}
                    <li class="page-item">
                        <a class="page-link" href="{{ url_for('student_coach.list', page=pagination.next_num) }}">
                            <i class="fas fa-chevron-right"></i>
                        </a>
                    </li>
                    {% endif %}
                </ul>
            </nav>
        </div>
    </div>
    {% endif %}

    {% else %}
    <!-- 空状态 -->
    <div class="row">
        <div class="col-12">
            <div class="empty-state">
                <i class="fas fa-chalkboard-teacher"></i>
                <h4>暂无教练</h4>
                <p class="text-muted">当前校区还没有可用的教练</p>
                <a href="{{ url_for('student_coach.search') }}" class="btn btn-primary">
                    <i class="fas fa-search me-1"></i>搜索教练
                </a>
            </div>
        </div>
    </div>
    {% endif %}
</div>
{% endblock %}

{% block extra_js %}
<script>
$(document).ready(function() {
    // 行悬停效果
    $('.coach-row').hover(
        function() {
            $(this).addClass('shadow');
        },
        function() {
            $(this).removeClass('shadow');
        }
    );

    // 快速筛选按钮状态
    const currentUrl = window.location.href;
    $('.quick-filters a').each(function() {
        if (currentUrl.includes(this.href) || (this.href.endsWith('list') && !currentUrl.includes('gender') && !currentUrl.includes('coach_level'))) {
            $(this).removeClass('btn-outline-light').addClass('btn-light');
        }
    });
});
</script>
{% endblock %}